import React from 'react';
import { FieldChangeData, LCGUI } from '../../../json-schema/LCGUI';
import { Control } from '../../../json-schema/SchemaTypes';
import { DateTimeController } from './DateTimeController';
import { ConfigType } from '../../../designer/right/ConfigContent';
import {
  AlignBottomTwo,
  AlignHorizontalCenterTwo,
  AlignLeftTwo,
  AlignRightTwo,
  AlignTopTwo,
  AlignVerticalCenterTwo,
} from '@icon-park/react';

export const DateTimeConfig: React.FC<ConfigType<DateTimeController>> = ({ controller }) => {
  const config = controller.getConfig()?.style!;

  const onFieldChange = (fieldChangeData: FieldChangeData) => {
    const { dataFragment } = fieldChangeData;
    controller.update(dataFragment);
  };

  const schema: Control = {
    type: 'grid',
    config: {
      columns: 2,
    },
    children: [
      {
        key: 'style',
        children: [
          {
            key: 'fontSize',
            type: 'number-input',
            label: '字号',
            value: config?.fontSize,
            config: { min: 1 },
          },
          {
            key: 'fontWeight',
            type: 'number-input',
            label: '加粗',
            value: config?.fontWeight || 400,
            config: {
              min: 100,
              max: 900,
              step: 100,
            },
          },
          {
            key: 'color',
            type: 'color-picker',
            label: '颜色',
            value: config?.color,
            config: {
              showText: true,
            },
          },
          {
            key: 'fontFamily',
            type: 'select',
            label: '字体',
            value: config?.fontFamily,
            config: {
              options: [
                { label: '钉钉进步体', value: 'DingTalk JinBuTi' },
                { label: '抖音美好体', value: 'DouyinSansBold' },
                { label: '优设标题黑', value: '优设标题黑' },
                { label: '庞门正道标题', value: '庞门正道标题体免费版' },
              ],
            },
          },
          {
            key: 'letterSpacing',
            type: 'number-input',
            label: '字距',
            value: config?.letterSpacing,
            config: {
              step: 0.1,
            },
          },
          {
            type: 'select',
            label: '模板',
            key: 'formatType',
            value: config?.formatType,
            config: {
              options: [
                { label: '-', value: '0' },
                { label: '/', value: '1' },
                { label: 'CN', value: '2' },
              ],
            },
          },
          {
            type: 'grid',
            label: '对齐',
            config: {
              columns: 2,
              containerStyle: {
                gridColumn: '1/3',
              },
            },
            children: [
              {
                type: 'group-button',
                key: 'justifyContent',
                value: config?.justifyContent,
                config: {
                  items: [
                    {
                      value: 'flex-start',
                      content: <AlignLeftTwo theme='filled' size='16' strokeWidth={2} strokeLinecap='square' />,
                    },
                    {
                      value: 'center',
                      content: (
                        <AlignHorizontalCenterTwo theme='filled' size='16' strokeWidth={2} strokeLinecap='square' />
                      ),
                    },
                    {
                      value: 'flex-end',
                      content: <AlignRightTwo theme='filled' size='16' strokeWidth={2} strokeLinecap='square' />,
                    },
                  ],
                },
              },
              {
                type: 'group-button',
                key: 'alignItems',
                value: config?.alignItems,
                config: {
                  items: [
                    {
                      value: 'flex-start',
                      content: <AlignTopTwo theme='filled' size='16' strokeWidth={2} strokeLinecap='square' />,
                    },
                    {
                      value: 'center',
                      content: (
                        <AlignVerticalCenterTwo theme='filled' size='16' strokeWidth={2} strokeLinecap='square' />
                      ),
                    },
                    {
                      value: 'flex-end',
                      content: <AlignBottomTwo theme='filled' size='16' strokeWidth={2} strokeLinecap='square' />,
                    },
                  ],
                },
              },
            ],
          },
        ],
      },
    ],
  };

  return <LCGUI schema={schema} onFieldChange={onFieldChange} />;
};
